﻿<div class="demo-description" id="MultiSelect">
    <h2><DemoNavLink Link="Calendar#MultiSelect" />Calendar - Multiple Selection</h2>
    <p>In this demo module, the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxCalendar-1">Calendar</a> component allows you to select several dates simultaneously. Click a date while you press <kbd>Ctrl</kbd> to add a date to the selection.</p>
    <ul>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxCalendar-1.EnableMultiSelect">EnableMultiSelect</a> - Specifies whether multiple date selection is enabled.</li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxCalendar-1.SelectedDates">SelectedDates</a> - Specifies the collection of selected dates.</li>
    </ul>
</div>

<div class="card demo-card border-0 bg-transparent">
    <div class="card-body p-0">
        <DxCalendar EnableMultiSelect="true" SelectedDates="@GetSelectedDates()">
        </DxCalendar>
    </div>
</div>

<CodeSnippet_Editor_Calendar_MultiSelect/>

@code {
    List<DateTime> GetSelectedDates() {
        DateTime baseDate = DateTime.Today;

        return new List<DateTime>() { baseDate.AddDays(-9), baseDate.AddDays(-5), baseDate.AddDays(-4), baseDate.AddDays(6), baseDate.AddDays(12), baseDate.AddDays(13), baseDate.AddDays(15) };
    }
}
